<template>
  <div class="rank w">
    <div class="main-con">
      <div class="con-l">
        <div class="cover_out">
          <img :src="cover" alt="" class="cover" lazy="loaded">
        </div>
        <p class="songInfo">歌单简介</p>
        <p class="songInfo-txt">
          运动能使人的身心，得到一定的释放。就算宅在家，也不能懒惰。快起来，跟着节奏动起来吧！甩掉身上的肥油~
        </p>
        <div class="downLoadContainer">
          <a href="#" class="downLoad">
            <i class="iconfont icon-xiazai" />
            下载该歌单
          </a>
        </div>
        <div class="qrCode">
          <img src="https://h5static.kuwo.cn/www/kw-www/img/qrcode.d53daff.png" data-v-0b53d998="" class="codeImg">
          <p class="codeTxt">手机扫描二维码下载客户端</p>
        </div>
      </div>
      <div class="con-r">
        <div class="title">
          <div class="title-content" />
          <p class="song-author">
            <span class="userName">{{ title }}</span>
          </p>
        </div>
        <div class="button">
          <button class="playAll"> <i class="iconfont icon-24gl-play" /> 播放全部</button>
          <button class="add"> <i class="iconfont icon-zengjia" /> 添加</button>
          <button class="pinglun"> <i class="iconfont icon-duihuaxinxi" />分享</button>
          <button class="like"> <i class="iconfont icon-aixin" /> 收藏</button>

          <button class="pinglun"> <i class="iconfont icon-duihuaxinxi" /> 评论</button>
        </div>
        <div class="rank-content">
          <div class="header">
            <div class="index">序号</div>
            <div class="song">歌曲</div>
            <div class="singer">歌手</div>
            <div class="time">时长</div>
          </div>
          <div class="body">
            <div
              v-for="(song,index) in songList"
              :key="song.musicrid"
              class="body-item"
              @mouseenter="showIcon(index)"
              @mouseleave="hiddenIcon(index)"
            >
              <div class="index">
                <div>{{ index > 2? index+1 : '' }}</div>
              </div>
              <div class="song">{{ song.name }}</div>
              <div class="singer">{{ song.artist }}</div>
              <!-- <div class="card">{{ song.album }}</div> -->
              <div class="time" :style="{display: moveIndex === index ? 'none' : 'block'}">{{ song.songTimeMinutes }}</div>
              <div class="icon" :style="{display: moveIndex === index ? 'block' : 'none'}">
                <i
                  class="iconfont icon-play"
                  @click="playSong(song.albumid)"
                />
                <i class="iconfont icon-zengjia" />
                <i class="iconfont icon-aixin" />
                <i class="iconfont icon-xiazai" />
              </div>
            </div>
          </div>
        </div>
        <div class="comment">
          <div class="all-comment">
            <div class="newComment">
              <span class="newCommentTitle">"最新评论"</span>
              <span class="newCommentCount">6条</span>
            </div>
            <div class="commentContent">
              <div class="eachComment">
                <div class="commentAvatar">
                  <img alt="" data-src="http://img1.kuwo.cn/star/userhead/78/32/1650452221385_518765378s.jpg" src="http://img1.kuwo.cn/star/userhead/78/32/1650452221385_518765378s.jpg" lazy="loaded">
                </div>
                <div class="commentMsg">
                  <div class="commentNickName">lOGAN</div>
                  <div class="comment-content">回复:哈喽</div>
                  <div class="replyContent">你好呀</div>
                  <div class="commentTime">13小时前</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <audio :src="songUrl" style="position:fixed; bottom:200px; left:50px" controls autoplay /> -->
    <Player />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SongDetail',

  data() {
    return {
      moveIndex: 0, // 鼠标移入的歌曲下标
      songUrl: null // 歌曲播放链接
    }
  },
  computed: {
    ...mapState('songList', ['songList', 'cover', 'title'])
  },
  async mounted() {
  },
  methods: {
    // 点击播放歌曲
    async playSong(id) {
      const res = await this.$API.rank.reqGetSongUrl(id, 'music')
      console.log(res)
      if (res.code === 200) {
        this.songUrl = res.data.url
        this.$message.success('正在播放')
      } else {
        this.$message.error('歌曲已下线')
      }
    },
    // 鼠标移出显示时间
    hiddenIcon() {
      this.moveIndex = null
    },
    // 鼠标移入显示icon
    showIcon(index) {
      this.moveIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
  .rank {
    .main-con {
      width: 1288px;
      display: flex;
      justify-content: space-between;
      .con-l{
        width:23%;
        margin-top:47px;
        .cover_out{

          img{
           width: 100%;
           height: 100%;
          }
        }
        .songInfo{
          margin-top:40px;
          margin-bottom:10px;
          font-size: 22px;
          font-weight: 600;
          height: 30px;
          line-height:30px;
        }
        .songInfo-txt{
          width: 100%;
          font-size: 14px;
          color:#666;
          line-height: 21px;
        }
        .downLoad{
          display: block;
          width: 202px;
          height: 44px;
          margin:30px auto 0;
          text-align: center;
          line-height: 44px;
          box-shadow:0 4px 10px 0 rgb(255 223 31 / 30%);
          border-radius:27px;
          color:#333;
          background: #ffe12c;
          font-size:16px;
        }
         .qrCode{
            margin:36px 0;
            border-top:1px solid #efefef;
            text-align: center;
            .codeImg{
              margin:36px 0;
              width: 168px;
              height: 168px;
            }
            .codeTxt{
              font-size: 16px;
              font-weight: 300;
              color: #666;
              line-height:21px;
            }
          }
      }
      .con-r {
        width:70%;
        .title {
          // display: flex;
          padding: 20px 0;
          // align-items: flex-end;
          .song-author{
            height: 25px;
            font-size: 30px;
            line-height: 25px;
            color:#333;
            font-weight: bold;
            font-weight: 400;
            margin-top: 14px;
            display: flex;
            align-items: center;
            .userImg{
            width: 32px;
            height: 32px;
            margin-right: 10px;
          }
          }

          .title-time{
            margin-left: 10px;
            color: #999;
            font-size: 14px;
          }
          .title-content{
            font-size: 38px;
            font-weight: bold;
          }
        }
        .button {
          margin-bottom: 25px;
          button {
            font-size: 16px;
            margin-right: 10px;
            &.playAll {
              width: 150px;
              height: 40px;
              border-radius: 20px;
              border-style: none;
              background-color: #ffe12c;
            }
            &.add, &.like, &.pinglun {
              width: 118px;
              height: 40px;
              border-radius: 20px;
              border-style: none;
            }
          }
        }
        .comment{

          margin-top:48px;
          .all-comment{
            margin-top:30px;
            .newComment{
              line-height:30px;
              margin-bottom:22px;
              .newCommentTitle{
                font-size:22px;
                font-weight:600;
              }
              .newCommentCount{
                margin-left: 8px;
                font-weight: 300;
                font-size:14px;
              }
            }
            .commentContent{
               display: flex;
               justify-content: space-between;
              .eachComment{
                display: flex;

                font-size:14px;
                line-height:1;
                color:#333;
                .commentAvatar{
                  height:80px;
                  margin-right:14px;
                  img{
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    margin-top:3px;
                  }
                }
                .commentMsg{
                  position: relative;
                  flex:1;
                  padding-bottom:20px;
                  border-bottom:1px solid #f2f2f2;
                  .commentNickName{
                    height: 22px;
                    line-height: 22px;
                    font-size: 14px;
                    font-weight: 600;
                  }
                  .comment-content{
                    font-size:14px;
                    line-height:26px;
                    white-space: pre-wrap;
                    word-break:break-all;
                    word-wrap:pre-wrap;
                  }
                  .replyContent{
                    margin-top:10px;
                    margin-left:px;
                    border-left:1px solid #dbdbdb;
                    padding:0 10px;
                    font-size:14px;
                    line-height:20px;
                    color:#666;
                  }
                  .commentTime{
                    height: 17px;
                    line-height: 17px;
                    font-size:12px;
                    opacity: .8;
                    margin-top:5px;
                  }
                }
              }
            }
          }
        }
        .rank-content{
          .header {
            display: flex;
            align-items: center;
            height: 46px;
            font-size: 14px;
            color: #999;
            background-color: #fafafa;
          }
          .body-item {
            display: flex;
            align-items: center;
            height: 70px;
            font-size: 14px;
            color: #333;
            background-color: #fafafa;
            &:nth-child(odd) {
              background-color: #fff;
            }
            &:hover {
              background-color: #f5f5f5;
            }
            &:first-child {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_first.df06fb1.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            &:nth-child(2) {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_secondary.d99e73e.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            &:nth-child(3) {
              .index {
                div {
                  background: url(https://h5static.kuwo.cn/www/kw-www/img/icon_third.8abbb65.png) center no-repeat;
                  background-size: 168%;
                }
              }
            }
            .icon {
              font-size: 25px;
              width: 170px;
              padding-right: 10px;
              color: #666;
              display: flex;
              justify-content: space-between;
              i {
                margin-right: 20px;
              }
            }
          }
          .index {
            flex-shrink: 0;
            width: 90px;
            padding-left: 28px;
            padding-right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #333;
            font-weight: bold;
            box-sizing: border-box;
            div {
              width: 20px;
              height: 33px;
              line-height: 33px;
              text-align: center;
            }
            img {
              width: 54px;
              height: 54px;
            }
          }
          .song{
            flex-shrink: 0;
            width: 273px;
          }
          .singer {
            flex-shrink: 0;
            color: #666;
            width: 372px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-right: 10px;
          }
          // .card{
          //   color: #666;
          //   width: 253px;
          //   white-space: nowrap;
          //   text-overflow: ellipsis;
          //   overflow: hidden;
          // }
        }
        .pagination {
          text-align: center;
          margin-top: 48px;
          /deep/ .el-pager {
            .number, .more {
              width: 42px;
              height: 42px;
              text-align: center;
              line-height: 42px;
              color: #333;
              background-color: transparent;
            }
            .number.active {
              background-color: rgb(255, 223, 31);
            }
          }
          /deep/ .btn-prev,
          /deep/ .btn-next{
            width: 42px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            background-color: transparent;
          }
        }
      }
    }
  }
</style>
